<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<html class="app">
<head>
  <meta charset="utf-8" />
  <title>魔音云音乐</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="js/jPlayer/jplayer.flat.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="css/animate.css" type="text/css" />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
  <link rel="stylesheet" href="css/font.css" type="text/css" />
  <link rel="stylesheet" href="css/app.css" type="text/css" />
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="test/IndexAlbum.js"></script>
  <script src="test/IndexSong.js"></script>
  <link rel="stylesheet" href="test/Login&Register.css" />
  <script src="test/IndexAlbum.js"></script>
  <script src="test/IndexSong.js"></script>
  <script src="test/cyb.js"></script>
  <script src="js/csx/csx.js"></script>

  <!--[if lt IE 9]>
  <script src="js/ie/html5shiv.js"></script>
  <script src="js/ie/respond.min.js"></script>
  <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<style>
  .slide_action_left{
    width: 120px;height: 120px;float: left;font-size: 60px; margin-left:8%;margin-top: 10%;
  }
  .slide_action_right{
    width: 120px;height: 120px;float: right;font-size: 60px;margin-top: 10%;margin-right: 5%;
  }
  .mod_slide_action{
    position: absolute;z-index:0;height: 100%;width: 100%;
    display: none;
  }
  .recommand_songlist{
    text-align:center;font-size: 24px;position:relative;z-index: 0;
  }
  .album_div{
    position:relative;z-index: 0;
  }
  .catagory_title{
    text-align: center;font-size: 30px;font-weight: bolder;margin-bottom: 2%;margin-top: 3%;
  }
  .newsong_recommand ul{
    z-index: 0;
  }
  .newsong_recommand ul li{
    list-style:none;}

  /*登录弹框样式开始 */

  #overDiv {
    background-color:#000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; /*FF IE7*/
    filter: alpha(opacity = 65); /*IE*/
    opacity: 0.65; /*FF*/
    z-index: 110;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
  }

  #hsDiv {
    background:#fff;

    z-index: 120;
    width: 400px;
    height: 300px;
    left: 43%; /*FF IE7*/
    top: 37%; /*FF IE7*/
    margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */
    margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/
    margin-top: 0px;
    position: fixed !important; /*FF IE7*/
    position: absolute; /*IE6*/
  }

  /*-------登陆表单的设置------------*/
  #closediv{
    margin-left: 390px;
    margin-top: -10px;
  }
  #dlTitle{
    text-align: center;font-size: 24px;
    width:400px;
    height: 30px;

  }
  #logintb{
    width: 300px;
    height:auto;
    border: 0px;
    margin-top: 5px;
  }
  #logintb .logintd1,#logintb .logintd3
  {
    height:35px;
    vertical-align: bottom;
  }
  #logintb .logintd1
  {
    font-size:12px;
    color: #888888;
  }
  #logintb .logintd3{
    font-size:11px;
  }
  #logintb .logintd2
  {
    height:auto;

  }
  #logintb td a{
    float: right;
  }
  .logintd2 input{
    width:300px;
    height: 32px;
  }
  .logintd4 {
    height: 45px;
    text-align: center;
    vertical-align: bottom;
  }
  /*登录弹框样式结束 */

</style>
<body class="">
<section class="vbox">
  <header class="bg-white-only  header-md navbar navbar-fixed-top-xs">
    <div class="navbar-header aside bg-info nav-xs">
      <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html">
        <i class="icon-list"></i>
      </a>
      <a style="height: 60px" href="index.jsp" class="navbar-brand text-lt">
        <i style="line-height: 60px" class="icon-earphones"></i>
        <img src="images/logo.png" alt="." class="hide">
        <span class="hidden-nav-xs m-l-sm">Monster</span>
      </a>
      <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".user">
        <i class="icon-settings"></i>
      </a>
    </div>      <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">
        <i class="fa fa-indent text"></i>
        <i class="fa fa-dedent text-active"></i>
      </a>
    </li>
  </ul>
      <form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" action="SearchAllServlet?opr=searchSingers" method="post" role="search">
          <div class="form-group">
              <div class="input-group" style="float: left">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
            </span>
                  <input type="text" class="form-control input-sm no-border rounded" name="content" placeholder="搜索歌手，歌曲...">
              </div>
          </div>
      </form>
    <div style="float: left;font-size: 24px;font-weight: bolder; margin-left:14%;margin-top: 1%">
      <a href="genres.html" style="display:inline-block;width:75px; margin-left:20px;" class="to_singer_page">歌手</a>
      <a href="AlbumPageServlet?page=1&opr=showAll" style="display:inline-block;width:75px; margin-left:30px;">专辑</a>
      <a href="playlistServlet" style="display:inline-block;width:120px; margin-left:30px;">分类歌单</a>
      <a href="#" style="display:inline-block;width:100px; margin-left:30px;">排行榜</a>
      <a href="<%=request.getContextPath()%>/CSXUserServlet?opr=userPageMessage" style="display:inline-block;width:75px; margin-left:30px;">用户</a>
    </div>
    <a href="javascript:;" class="btn-login" style="display:inline-block;width:115px; margin-left:150px;">登录/注册</a>
    <div class="navbar-right ">
      <!--登录成功-->
      <ul class="nav navbar-nav m-n hidden-xs nav-user user" style="display: none">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle bg clear" data-toggle="dropdown"></a>
          <ul class="dropdown-menu animated fadeInRight">
          <%--  <li>
              <span class="arrow top"></span>
              <a href="#">设置</a>
            </li>--%>
            <li>
              <a href="<%=request.getContextPath()%>/CSXUserServlet?opr=userPageMessage">个人中心</a>
            </li>
            <%--<li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                通知
              </a>
            </li>--%>
            <%--<li>
              <a href="docs.html">帮助</a>
            </li>--%>
            <li class="divider"></li>
            <li>
              <a href="javascript:;" class="btn-logout">退出登录</a>  <!--modal.lockme.html-->
            </li>
          </ul>
        </li>
      </ul>
      <!--登录成功-->
    </div>
  </header>
  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
        <section class="vbox">
          <section class="w-f-md scrollable">
            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
              <!-- nav -->
              <nav class="nav-primary hidden-xs">
                <ul class="nav bg clearfix">
                  <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
                    探索
                  </li>
                  <li>
                    <a href="index.jsp">
                      <i class="icon-disc icon text-success"></i>
                      <span class="font-bold">首页</span>
                    </a>
                  </li>
                  <li>
                    <a href="genres.html" class="to_singer_page" name="singerPage" value="1">
                      <i class="icon-user icon text-info"></i>
                      <span class="font-bold">歌手</span>
                    </a>
                  </li>
                  <li>
                    <a href="AlbumPageServlet?page=1&opr=showAll">
                      <i class="icon-drawer icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right"></b>
                      <span class="font-bold">专辑</span>
                    </a>
                  </li>
                  <li>
                    <a href="playlistServlet">
                      <i class="icon-playlist icon text-primary-lter"></i>
                      <b class="badge bg-primary pull-right">6</b>
                      <span class="font-bold">分类歌单</span>
                    </a>
                  </li>
                  <li>
                    <a href="listen.html">
                      <i class="icon-music-tone-alt icon  text-info-dker"></i>
                      <span class="font-bold">听歌</span>
                    </a>
                  </li>
                  <li>
                    <a href="video.html" data-target="#content" data-el="#bjax-el" data-replace="true">
                      <i class="icon-social-youtube icon  text-primary"></i>
                      <span class="font-bold">MV</span>
                    </a>
                  </li>
                  <li class="m-b hidden-nav-xs"></li>
                </ul>
              </nav>
              <!-- / nav -->
            </div>
          </section>
        </section>
      </aside>
      <!-- /.aside -->
      <section id="content">
        <section class="hbox stretch">
          <section>
            <section class="vbox">
              <section class="scrollable padder-lg w-f-md" id="bjax-target">
                <a name="top" style="position:absolute;top:0;left:0;"></a>
                <a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin" ><i class="icon-refresh i-lg  inline" id="refresh" ></i></a>
                <div style="position: relative;z-index:1;" id="recommand_songlist">
                  <div class="mod_slide_action" id="recommand_songlist_slide">
                    <div class="slide_action_left playlistLeft">
                      <a href="#"><i class="fa fa-arrow-left" ></i></a>
                    </div>
                    <div class="slide_action_right playlistRight"  >
                      <a href="#" ><i class="fa fa-arrow-right" ></i></a>
                    </div>
                  </div>
                  <h2 class="font-thin m-b">MonsterMusic <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px;">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span></h2>
                  <div  class="catagory_title">歌单推荐</div>
                  <div class="recommand_songlist">
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="1">为你推荐&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="2">&nbsp;&nbsp;流派&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="3">&nbsp;&nbsp;语种&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="4">&nbsp;&nbsp;主题&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="5">&nbsp;&nbsp;心情&nbsp;&nbsp;</a>
                    <a href="javascript:;" class="playlistClass" data-type="playlist" value="6">&nbsp;&nbsp;场景</a>
                  </div>
                  <div class="row row-sm" style="margin-left: 20%;margin-right: 10%;margin-top: 2%;">
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 playlist" playlist-index="1">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="javascript:;" class="js-play"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/playlist/playlist_cover.png" alt="" class="r r-2x img-full" style="height: 282px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 playlist" playlist-index="2">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="javascript:;" class="js-play">
                                <i class="icon-control-play i-2x text"></i>
                              </a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right active" data-toggle="class">
                                <i class="fa fa-heart-o text"></i>
                                <i class="fa fa-heart text-active text-danger"></i>
                              </a>
                              <a href="#" data-toggle="class">
                                <i class="fa fa-plus-circle text"></i>
                                <i class="fa fa-check-circle text-active text-info"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/playlist/playlist_cover.png" alt="" class="r r-2x img-full" style="height: 282px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted"></a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 playlist" playlist-index="3">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="javascript:;" class="js-play"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/playlist/playlist_cover.png" alt="" class="r r-2x img-full" style="height: 282px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 playlist" playlist-index="4">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="javascript:;" class="js-play"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <div class="top">
                            <span class="pull-right m-t-n-xs m-r-sm text-white">
                              <i class="fa fa-bookmark i-lg"></i>
                            </span>
                          </div>
                          <a href="#"><img src="images/playlist/playlist_cover.png" alt="" class="r r-2x img-full" style="height: 282px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted"></a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 playlist" playlist-index="5">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="text-info padder m-t-sm text-sm">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star-o text-muted"></i>
                            </div>
                            <div class="center text-center m-t-n">
                              <a href="javascript:;" class="js-play"><i class="icon-control-play i-2x"></i></a>
                            </div>
                            <div class="bottom padder m-b-sm">
                              <a href="#" class="pull-right">
                                <i class="fa fa-heart-o"></i>
                              </a>
                              <a href="#">
                                <i class="fa fa-plus-circle"></i>
                              </a>
                            </div>
                          </div>
                          <a href="#"><img src="images/playlist/playlist_cover.png" alt="" class="r r-2x img-full" style="height: 282px"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted"></a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mod_slide_switch js_switch" data-stat="y_new.index.new_song.pager" style="margin-top: 15px;text-align:center;position:relative;z-index:1">
                    <a class="playlistPage" value="1" href="javascript:;" tabindex="-1" data-stat="y_new.index.new_song.pager" data-p="0"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a class="playlistPage" value="2" href="javascript:;" tabindex="-1" data-p="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    <a class="playlistPage" value="3" href="javascript:;" tabindex="-1" data-p="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                  </div>
                </div>
                <div >
                  <div class="row" style="position: relative;z-index:1;" id="row_page">
                    <h3 class="catagory_title" >新歌速递</h3>
                    <div class="new_songlist" >
                      <div class="song_list" style="text-align:center;font-size: 24px;">
                        <a href="javascript:;" id="song_click" class="new_song "  value="1">内地&nbsp;&nbsp;</a>
                        <a href="javascript:;" class="new_song "  value="2">&nbsp;&nbsp;港台&nbsp;&nbsp;</a>
                        <a href="javascript:;" class="new_song "  value="3">&nbsp;&nbsp;欧美&nbsp;&nbsp;</a>
                        <a href="javascript:;" class="new_song "  value="4">&nbsp;&nbsp;日本&nbsp;&nbsp;</a>
                        <a href="javascript:;" class="new_song "  value="5">&nbsp;&nbsp;韩国</a>
                      </div>
                      <div class="mod_slide_action" id="slide_page"  >
                        <div class="slide_action_left">
                          <a href="#" class="song_slide_left" ><i class="fa fa-arrow-left "></i></a>
                        </div>
                        <div class="slide_action_right">
                          <a href="#" class="song_slide_right" ><i class="fa fa-arrow-right" ></i></a>
                        </div>
                      </div>
                      <div class="row row-sm" class="row row-sm" style="margin-left: 20%;margin-right: 20%;margin-top: 2%;position:relative;z-index: 2;">
                        <div class="col-xs-6 col-sm-3 song_item" data-index="1" style="position:relative;z-index:2;">
                          <div class="item">
                            <div class="pos-rlt" style="float: left;">
                              <div class="item-overlay opacity r r-2x bg-black" >
                                <div class="center text-center m-t-n"  >
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name" >Spring rain</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">sss </a>
                              <a href="#" class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>

                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="2">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a3.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div  class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Hope</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Miya</a>
                              <a class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>

                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="3" style="position:relative;z-index:2;">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a8.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Listen wind</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Soyia Jess</a>
                              <a class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="4" style="position:relative;z-index:2;">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a9.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Breaking me</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Pett JA</a>
                              <a class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="5" style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Nothing</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Willion</a>
                              <a class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="6"style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a6.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Panda Style</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Lionie</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="7" style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left;">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a7.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Hook Me</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Gossi</a>
                              <a class="singer_id" ></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item " data-index="8" style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a5.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Tempered Song</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Miaow</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="9" style="clear:left;position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a1.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Nothing</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Willion</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="10"style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a6.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Panda Style</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Lionie</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item" data-index="11" style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left;">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a7.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Hook Me</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Gossi</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 song_item " data-index="12" style="position:relative;z-index:2;margin-top: 2%">
                          <div class="item">
                            <div class="pos-rlt" style="float: left">
                              <div class="item-overlay opacity r r-2x bg-black">
                                <div class="center text-center m-t-n">
                                  <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                                </div>
                              </div>
                              <a href="#"><img src="images/a5.png" alt="" class="r r-2x img-full" style="width: 125px"></a>
                            </div>
                            <div class="padder-v" style="text-indent: 10px;font-weight: bolder;font-size: 12px">
                              <a href="#" class="text-ellipsis song_name">Tempered Song</a>
                              <a href="#" class="song_id" ></a>
                              <a href="#" class="text-ellipsis text-xs text-muted singer_name">Miaow</a>
                              <a class="singer_id"></a>
                              <a class="text-ellipsis text-xs text-muted">4:01</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mod_slide_switch js_switch " data-stat="y_new.index.new_song.pager" style="margin-top: 2%;text-align:center;position:relative;z-index:1">
                      <a href="javascript:;" class="new_song_bottom "  value="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                      <a href="javascript:;" class="new_song_bottom "  value="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    </div>
                  </div>
                </div>
                </div>
                <div class="album_div" id="album_div" style="position:relative;z-index: 1;">
                  <div class="row" style="position:relative;">
                    <h3 class="catagory_title">新碟首发</h3>
                    <div class="mod_slide_action" id="album_slide">
                      <div class="slide_action_left">
                        <a href="#" class="album_slide_left"><i class="fa fa-arrow-left" ></i></a>
                      </div>
                      <div class="slide_action_right"  >
                        <a href="#" class="album_slide_right"><i class="fa fa-arrow-right" ></i></a>
                      </div>
                    </div>
                    <div class="new_albumlist" style="text-align:center;font-size: 24px;position: relative;z-index: 1;">
                      <a href="javascript:;" class="new_albumlist_item" value="1">&nbsp;&nbsp;内地&nbsp;&nbsp;</a>
                      <a href="javascript:;" class="new_albumlist_item" value="2">&nbsp;&nbsp;港台&nbsp;&nbsp;</a>
                      <a href="javascript:;" class="new_albumlist_item" value="3">&nbsp;&nbsp;欧美&nbsp;&nbsp;</a>
                      <a href="javascript:;" class="new_albumlist_item" value="4">&nbsp;&nbsp;日本&nbsp;&nbsp;</a>
                      <a href="javascript:;" class="new_albumlist_item" value="5">&nbsp;&nbsp;韩国</a>
                    </div>
                  </div>
                  <div class="row row-sm" class="row row-sm"  style="margin-left: 19%;margin-right: 19%;margin-top: 2%;position:relative;z-index: 2;">
                    <div class="col-xs-6 col-sm-3 album_item" data-index="1" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n" >
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/album/dengdaiditie.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Spring rain</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Miaow</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="2" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m10.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Hope</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Miya</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="3" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m9.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Listen wind</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Soyia Jess</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="4" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m7.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Breaking me</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Pett JA</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="5" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m2.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Nothing</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Willion</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="6" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m8.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Panda Style</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Lionie</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="7" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m3.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Hook Me</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Gossi</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-3 album_item" data-index="8" style="position:relative;z-index:2;">
                      <div class="item">
                        <div class="pos-rlt">
                          <div class="item-overlay opacity r r-2x bg-black">
                            <div class="center text-center m-t-n">
                              <a href="#" class="js-play"><i class="fa fa-play-circle i-2x"></i></a>
                            </div>
                          </div>
                          <a href="#"><img src="images/m2.jpg" alt="" class="r r-2x img-full"></a>
                        </div>
                        <div class="padder-v">
                          <a href="#" class="text-ellipsis album_name">Tempered Song</a>
                          <a href="#" class="album_id"></a>
                          <a href="#" class="text-ellipsis text-xs text-muted album_singer">Miaow</a>
                          <a href="#" class="singer_id"></a>
                        </div>
                      </div>
                    </div>
                    <div class="mod_slide_switch js_switch" data-stat="y_new.index.new_song.pager" style="margin-top: 10%;text-align:center;position:relative;z-index:1">
                      <a href="javascript:;" class="album_bottom" value="1"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                      <a href="javascript:;" class="album_bottom" value="2"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                      <a href="javascript:;" class="album_bottom" value="3"><i class="fa fa-circle">&nbsp;&nbsp;</i></a>
                    </div>
                  </div>
                </div>
                </div>
                </div>
                </div>
                <div >
                  <div  class="catagory_title">排行榜</div>
                  <div class="row row-sm" style="margin-left: 8%;margin-right:5%;margin-top: 2%;margin-bottom:10%;">
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" style="width: 18%;z-index: 1;background:url(images/tim1.jpg)" >
                      <div class="item">
                        <div class="pos-rlt" >
                          <div align="center" style="margin-top: 20%;">
                            <h3>巅峰榜</h3>
                            <h2>流行指数</h2>
                          </div>
                          <div >
                            <div style="margin-top: 20%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">1. 死了都要爱</a><br>
                              <a href="#">信乐团</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">2. 一千年以后</a><br>
                              <a href="#">林俊杰</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; margin-bottom: 50%;">
                              <a href="#" >3. 青花瓷</a><br>
                              <a href="#">周杰伦</a>
                            </div>
                          </div>
                          <div class="item-overlay " style="margin-top: 120%;">
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                          </div>
                          <img alt="" class="r r-2x img-full">
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" style="width: 18%;margin-left:1%;z-index: 1;background:url(images/timg2.jpg)">
                      <div class="item">
                        <div class="pos-rlt">
                          <div align="center" style="margin-top: 20%;">
                            <h3>巅峰榜</h3>
                            <h2>热&nbsp;&nbsp;歌</h2>
                          </div>
                          <div >
                            <div style="margin-top: 20%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">1. 死了都要爱</a><br>
                              <a href="#">信乐团</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">2. 一千年以后</a><br>
                              <a href="#">林俊杰</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; margin-bottom: 50%;">
                              <a href="#" >3. 青花瓷</a><br>
                              <a href="#">周杰伦</a>
                            </div>
                          </div>
                          <div class="item-overlay " style="margin-top: 120%;">
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                          </div>
                          <img alt="" class="r r-2x img-full"></a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" style="width: 18%;margin-left:1%;z-index: 1;background:url(images/timg3.jpg)">
                      <div class="item">
                        <div class="pos-rlt">
                          <div align="center" style="margin-top: 20%;">
                            <h3>巅峰榜</h3>
                            <h2>新&nbsp;&nbsp;歌</h2>
                          </div>
                          <div >
                            <div style="margin-top: 20%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">1. 死了都要爱</a><br>
                              <a href="#">信乐团</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">2. 一千年以后</a><br>
                              <a href="#">林俊杰</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; margin-bottom: 50%;">
                              <a href="#" >3. 青花瓷</a><br>
                              <a href="#">周杰伦</a>
                            </div>
                          </div>
                          <div class="item-overlay " style="margin-top: 120%;">
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                          </div>
                          <img alt="" class="r r-2x img-full"></a>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" style="width: 18%;margin-left:1%;z-index: 1;background:url(images/timg4.jpg)">
                      <div class="item">
                        <div class="pos-rlt">
                          <div align="center" style="margin-top: 20%;">
                            <h3>巅峰榜</h3>
                            <h2>欧&nbsp;&nbsp;美</h2>
                          </div>
                          <div >
                            <div style="margin-top: 20%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">1. 死了都要爱</a><br>
                              <a href="#">信乐团</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">2. 一千年以后</a><br>
                              <a href="#">林俊杰</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; margin-bottom: 50%;">
                              <a href="#" >3. 青花瓷</a><br>
                              <a href="#">周杰伦</a>
                            </div>
                          </div>
                          <div class="item-overlay " style="margin-top: 120%;">
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                          </div>
                          <img alt="" class="r r-2x img-full"></a>
                        </div>
                      </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" style="width: 18%;margin-left:1%;z-index: 1;background:url(images/timg5.jpg)">
                      <div class="item">
                        <div class="pos-rlt">
                          <div align="center" style="margin-top: 20%;">
                            <h3>巅峰榜</h3>
                            <h2>日&nbsp;&nbsp;韩</h2>
                          </div>
                          <div >
                            <div style="margin-top: 20%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">1. 死了都要爱</a><br>
                              <a href="#">信乐团</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; ">
                              <a href="#">2. 一千年以后</a><br>
                              <a href="#">林俊杰</a>
                            </div>
                            <div style="margin-top: 10%;margin-left:20%;ont-size: 16px; margin-bottom: 50%;">
                              <a href="#" >3. 青花瓷</a><br>
                              <a href="#">周杰伦</a>
                            </div>
                          </div>
                          <div class="item-overlay " style="margin-top: 120%;">
                            <div class="center text-center m-t-n">
                              <a href="#" data-toggle="class">
                                <i class="icon-control-play i-2x text"></i>
                                <i class="icon-control-pause i-2x text-active"></i>
                              </a>
                            </div>
                          </div>
                          <img alt="" class="r r-2x img-full"></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div style="background-color: #a5a5a5;padding: 1% 1%;">
                  <div class="footer_download" align="center">
                    <h4 class="footer_tit">友情链接</h4>
                    <a href="https://y.qq.com/" >QQ音乐：https://y.qq.com/</a>
                    <a href="http://www.kugou.com/" >酷狗音乐：http://www.kugou.com/</a>
                    <a href="//y.qq.com/download/" >网易音乐：https://music.163.com/</a>
                    <a href="https://www.xiami.com/" >虾米音乐：https://www.xiami.com/</a>
                    <a href="" >千千静听: http://music.taihe.com/</a>
                    </ul>
                  </div>
                  <div align="center" style="padding-top:1%">
                    <a href="">关于魔音|</a>
                    <a href="">About MonsterMusic|</a>
                    <a href="">服务条款|</a>
                    <a href="">用户服务协议|</a>
                    <a href="">隐私政策|</a>
                    <a href="">权利声明|</a>
                    <a href="">广告服务|</a>
                    <a href="">客服中心|</a>
                    <a href="">魔音招聘|</a>
                    <a href="">网站导航</a>
                  </div>
                  <div align="center">
                    Copyright @ 2018 - 2019 MonsterMusic All Rights Reserved.
                  </div>
                  <div align="center">
                    <a >魔音公司  </a>
                    <a href="">  版权所有</a>
                    <a href="">  魔音网络文化经营许可证</a>
                  </div>
                </div>
              </section>
              <!--  <footer class="footer bg-dark">
                       <div id="jp_container_N">
                    <div class="jp-type-playlist">
                      <div id="jplayer_N" class="jp-jplayer hide"></div>
                      <div class="jp-gui">
                        <div class="jp-video-play hide">
                          <a class="jp-video-play-icon">play</a>
                        </div>
                        <div class="jp-interface">
                          <div class="jp-controls">
                            <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                            <div>
                              <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                              <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                            </div>
                            <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                            <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                            <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                            <div class="jp-progress hidden-xs">
                              <div class="jp-seek-bar dk">
                                <div class="jp-play-bar bg-info">
                                </div>
                                <div class="jp-title text-lt">
                                  <ul>
                                    <li></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm">
                              <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                              <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                            </div>
                            <div class="hidden-xs hidden-sm jp-volume">
                              <div class="jp-volume-bar dk">
                                <div class="jp-volume-bar-value lter"></div>
                              </div>
                            </div>
                            <div>
                              <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                              <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                            </div>
                            <div>
                              <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                              <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                            </div>
                            <div class="hide">
                              <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                              <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jp-playlist dropup" id="playlist">
                        <ul class="dropdown-menu aside-xl dker">
                          &lt;!&ndash; The method Playlist.displayPlaylist() uses this unordered list &ndash;&gt;
                          <li class="list-group-item"></li>
                        </ul>
                      </div>
                      <div class="jp-no-solution hide">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                      </div>
                    </div>
                  </div>
                </footer>-->
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</section>
</section>

<!--页面底部回到顶部按钮-->
<a href="#top" class="btn-bottom-top js-top" title="回到顶部"><i class="fa fa-chevron-up fa-stack-1x"></i></a>
<!--页面底部打开播放器按钮-->
<a href="javascript:;" class="btn-bottom-player js-play" title="打开音乐播放器"><i class="fa fa-caret-square-o-right fa-stack-1x"></i></a>

<!--登录页面-->
<script src="test/Login&Register.js"></script>
<table class="login-table" align="center" style="display: none">
  <tr>
    <td align="center">
      <div class="login_inner">
        <div class="login_close"><a href="javascript:;" class="login_close_txt">×</a></div>
        <div class="login_popup">
          <div class="login__popup popup_title">
            <h4 class="popup_title_txt">登录魔音云音乐</h4>
            <a href="javascript:;" class="btn-code-login">切换至手机验证码登录</a>
          </div>
          <div class="login__popup popup_warn" style="visibility: hidden;">
            <i class="popup_warn_icon"></i>
            <span class="popup_warn_txt" ></span>
          </div>
          <form class="login__popup popup_form" action="login" method="post">
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable">账号：</span>
                <input class="popup_txt_input" type="text" placeholder="请输入手机号" name="phone">
              </div>
            </div>
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable">密码：</span>
                <input class="popup_password" type="password" placeholder="请输入密码" name="password" >
                <span class="popup_txt_lable popup_forget">忘记密码</span>
              </div>
            </div>
            <div class="popup_tool_area">
              <div class="popup_tool_lt">
                <input class="popup_tool_checkbox" type="checkbox" name="autologin1" id="autologin" value="autologin" checked>
                <label for="autologin">下次自动登录</label>
              </div>
              <div class="popup_tool_rt">
                <a href="javascript:;" class="popup_now_reg">立即注册</a>
              </div>
              <input type="hidden" name="nulltext">
            </div>
            <div class="popup_txt_area">
              <div class="popup_login_box">
                <p class="empty-box"></p>
                <!--<input type="button" value="登录" class="mod_btn_green popup_login_btn">-->
                <a href="javascript:;" class="btn-login-action popup_login_btn js-login">登&nbsp;&nbsp;录</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </td>
  </tr>
</table>
<table class="reg-table" align="center" style="display: none">
  <tr>
    <td align="center">
      <div class="reg_inner">
        <div class="login_close"><a href="javascript:;" class="login_close_txt">×</a></div>
        <div class="reg_popup">
          <div class="reg__popup popup_title">
            <h4 class="popup_title_txt">新用户注册</h4>
            <span class="popup_title_mess">轻松两步即可完成注册</span>
          </div>
          <div class="reg__popup popup_warn" style="visibility: hidden;">
            <i class="popup_warn_icon"></i>
            <span class="popup_warn_txt" ></span>
          </div>
          <form class="reg__popup popup_form" action="register" method="post">
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable" style="width: 20%;">手机号：</span>
                <input class="popup_txt_input" type="text" placeholder="请输入手机号" name="phone" style="width: 79%">
              </div>
            </div>
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable" style="width: 20%;">验证码：</span>
                <input class="popup_code" type="text" placeholder="请输入验证码" name="code">
                <span class="popup_txt_lable popup_send_code">发送验证码</span>
              </div>
            </div>
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable" style="width: 20%;">密码：</span>
                <input class="popup_password" type="password" placeholder="请输入你要设定的密码" name="password">
              </div>
            </div>
            <div class="popup_txt_area">
              <div class="popup_txt_box">
                <span class="popup_txt_lable" style="width: 20%;">重复密码：</span>
                <input class="popup_password" type="password" placeholder="请再次输入你要设定的密码" name="repassword">
              </div>
            </div>
            <div class="popup_tool_area">
              <div class="popup_tool_lt">
                <input class="popup_tool_checkbox" type="checkbox" name="autologin1" id="agreement" value="autologin" checked>
                <label for="agreement">我同意</label><a href="https://act.xiami.com/wow/xiami/act/protocol?spm=a2oj1.12028025.0.0.30dc1372kI1dEq" target="_blank" style="color: blue"
              >魔音云音乐用户协议</a>
              </div>
              <div class="popup_tool_rt">
                <a href="javascript:;" class="popup_back_login">返回登录</a>
              </div>
              <input type="hidden" name="nulltext">
            </div>
            <div class="popup_txt_area">
              <div class="popup_login_box">
                <p class="empty-box"></p>
                <a href="javascript:;" class="btn-reg-action popup_reg_btn js-reg">注&nbsp;&nbsp;册</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </td>
  </tr>
</table>
<div class="login-mask" style="display: none"></div>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jPlayer/demo.js"></script>
<script>
    window.onload = function(){
        var rs = document.getElementById("recommand_songlist");
        var rss = document.getElementById("recommand_songlist_slide");
        rs.onmouseover = function(){
            rss.style.display = "block";
        };
        rs.onmouseout = function(){
            rss.style.display = "none";
        };

        var ms = document.getElementById("row_page");
        var add = document.getElementById("slide_page");
        ms.onmouseover = function(){
            add.style.display = "block";
        };
        ms.onmouseout = function(){
            add.style.display = "none";
        };

        var ad = document.getElementById("album_div");
        var as = document.getElementById("album_slide");
        ad.onmouseover = function(){
            as.style.display = "block";
        };
        ad.onmouseout = function(){
            as.style.display = "none";
        };
    };
</script>

</body>
</html>